<template>
  <div class="login" :style="bgckground">
    <img class="logo" src="http://47.94.142.23/static/logo.4c57d1aa.png" alt />
    <div class="login-bg" :style="loginBg">
      <div class="cons">
        <div class="top">
          <div class="ttop">
            <h1 class="one-title">新龙后台</h1>
          </div>
          <span class="two-title" style="color: #fff">新龙县</span>
        </div>
        <div class="mid">
          <a-row>
            <a-col :offset="9" :span="6">
              <a-form :form="form" @submit="handleSubmit">
                <a-form-item
                  :validate-status="userNameError() ? 'error' : ''"
                  :help="userNameError() || ''"
                >
                  <a-input
                    class="input"
                    v-decorator="[
                      'account',
                      {
                        rules: [
                          {
                            required: true,
                            message: 'Please input your account!',
                          },
                        ],
                      },
                    ]"
                    placeholder="account"
                  >
                    <a-icon
                      slot="prefix"
                      type="user"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                </a-form-item>
                <a-form-item
                  :validate-status="passwordError() ? 'error' : ''"
                  :help="passwordError() || ''"
                >
                  <a-input
                    class="input"
                    v-decorator="[
                      'password',
                      {
                        rules: [
                          {
                            required: true,
                            message: 'Please input your Password!',
                          },
                        ],
                      },
                    ]"
                    type="password"
                    placeholder="Password"
                  >
                    <a-icon
                      slot="prefix"
                      type="lock"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-button
                    type="primary"
                    html-type="submit"
                    :disabled="hasErrors(form.getFieldsError())"
                    >Log in</a-button
                  >
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="bottom">
        <Bottom />
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/Login.js";
import Bottom from "../../components/Foot/index.vue";
import bg from "@/images/Login/bg.png";
import Login from "@/images/Login/login_bg.png";
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some((field) => fieldsError[field]);
}
export default {
  name: "login",
  data() {
    return {
      bgckground: {
        background: `url(${bg}) bottom no-repeat`,
        backgroundSize: "10rem 5.625rem",
      },
      loginBg: {
        background: `url(${Login}) center center no-repeat`,
      },
      token: "",
      hasErrors,
      form: this.$form.createForm(this, { name: "horizontal_login" }),
      userName: "",
      password: "",
    };
  },
  components: {
    Bottom,
  },
  methods: {
    userNameError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched("userName") && getFieldError("userName");
    },
    passwordError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched("password") && getFieldError("password");
    },
    handleSubmit(e) {
      console.log(e);
      e.preventDefault();
      // this.$router.push('/manage/home')
      this.form.validateFields(async (err, values) => {
        if (!err) {
          const loginData = await login(values);
          // 缓存存入token
          localStorage.setItem("token", loginData);
          // this.token = loginData
          console.log(loginData);
          if (loginData) {
            this.$message.info("login successfull!");
            this.$router.push("/temple");
          }
        }
      });
    },
  },
};
</script>

<style scoped>
/* .cons {
  height: 20vh;
} */
.login {
  /* 背景图高度 */
  height: 4.699346rem /* 719/153 */;
  margin: 0 auto;
  text-align: center;
  padding: 0;
  position: relative;
}
/* 登录框定位 */
.login-bg {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 4.052288rem /* 620/153 */;
  height: 2.810458rem /* 430/153 */;
  position: absolute;
  top: 1.699346rem /* 260/153 */;
  left: 2.941176rem /* 450/153 */;
  color: white;
}

.logo {
  width: 1.30719rem /* 200/153 */;
  height: 1.30719rem /* 200/153 */;
  margin-top: 0.326797rem /* 50/153 */;
}

.ttop {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.130719rem /* 20/153 */ 0;
}

.one-title {
  color: #fff;
  /* font-size: .156863rem 24/153; */
  font-weight: 500;
}

.two-title {
  display: inline-block;
  /* font-size: .091503rem 14/153; */
  margin: 0 0 0.130719rem /* 20/153 */;
}

.input {
  width: 1.960784rem /* 300/153 */;
  margin-left: -0.457516rem /* -70/153 */;
}
</style>